<div class="layui-row">
    <div class="layui-col-md8">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:120px;">分类</label>
                <div class="layui-input-inline fenlei2">
                    <input type="hidden" value="" class="fenlei_value">
                    <select name="fenlei" class="fenlei" lay-filter="fenlei">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item huati1">
                <label class="layui-form-label" style="width:120px;">话题选择</label>
                <div class="layui-input-inline huati2">
                    <input type="hidden" value="" class="huati_value">
                    <select name="huati" id="huati" class="huati" lay-filter="huati">
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">请先选择分类</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:120px;">用户选择</label>
                <div class="layui-input-inline">
                    <select name="users" id="users" class="users">
                        <?php if(!empty($users)){
                            foreach($users as $k=>$v){
                                ?>
                                <option value="<?=$v['uuid']?>"><?=$v['nick_name']?></option>
                            <?php }} ?>

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:120px;">关联素材</label>
                <div class="layui-input-inline users_material">
                    <input type="hidden" value="" class="material_value">
                    <select name="material" id="material" class="material" lay-filter="material">
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">请先选择话题</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:120px;">视频地址</label>
                <div class="layui-input-block">
                    <input type="text" name="title" placeholder="" style="width:70%;" class="layui-input old_video_url layui-disabled" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:120px;">添加横屏封面</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="test4"><i class="layui-icon"></i>上传横屏封面</button>
                    <input type="text" name="" class="wenzi4" style="width:300px;height:35px;margin-left:20px;display:none;">
                    <span class="up4" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                    <input type="hidden" name="video_url4" class="video_url4">
                </div>
                <br>
                <div style="border:1px solid gainsboro;width: 100px;height: 100px;margin-left: 150px;float: left;">
                    <img src="" style="width: 100px;height: 100px;" class="pic4">
                </div>
                <span style="margin-left: 10px;color: gainsboro;">建议尺寸528*296</span>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:120px;">添加竖屏封面</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="test2"><i class="layui-icon"></i>上传竖屏封面</button>
                    <input type="text" name="" class="wenzi2" style="width:300px;height:35px;margin-left:20px;display:none;">
                    <span class="up2" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                    <input type="hidden" name="video_url2" class="video_url2">
                </div>
                <br>
                <div style="border:1px solid gainsboro;width: 100px;height: 100px;margin-left: 150px;float: left;">
                    <img src="" style="width: 100px;height: 100px;" class="pic">
                </div>
                <span style="margin-left: 10px;color: gainsboro;">建议尺寸240*360</span>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:120px;">添加分享封面</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传分享封面</button>
                    <input type="text" name="" class="wenzi3" style="width:300px;height:35px;margin-left:20px;display:none;">
                    <span class="up3" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                    <input type="hidden" name="video_url3" class="video_url3">
                </div>
                <br>
                <div style="border:1px solid gainsboro;width: 100px;height: 100px;margin-left: 150px;float: left;">
                    <img src="" style="width: 100px;height: 100px;" class="pic3">
                </div>
                <span style="margin-left: 10px;color: gainsboro;">建议尺寸210x168，必填</span>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label" style="width:120px;">视频标题</label>
                <div class="layui-input-inline" style="float: left;">
                    <textarea name="desc" placeholder="请输入视频标题" class="layui-textarea video_desc" style="width:300px;"></textarea>
                </div>
                <span style="margin-left: 10px;margin-top: 5px;color: gainsboro;">最大字数为30</span>
            </div>
        </form>
    </div>
    <div class="layui-col-md4">
        <p>视频预览</p>
        <div style="border: 1px solid gainsboro;width: 90%;height: 300px;">
            <video src="" controls="controls" style="height: 300px;width: 100%;" class="sp" id="player"></video>
            <input type="hidden" value="" class="video_url">
            <input type="hidden" value="" class="duration">
        </div>
    </div>
</div>
<div style="float: right;">
    <button class="layui-btn layui-btn-normal join_" style="margin-left: 20px;margin-right: 20px;">添加到普通</button>
    <button class="layui-btn layui-btn-normal join" style="margin-left: 20px;margin-right: 20px;">添加到精选</button>
    <button class="layui-btn back" style="margin-left: 20px;margin-right: 20px;">取消</button>
</div>
<script>

    //添加到普通
    $('.join_').click(function(){
        var fenlei=$('.fenlei').val();
        var huati=$('.huati').val();
        var users=$('.users').val();
        var material=$('.material').val();//原始视频uuid
        var video_desc=$('.video_desc').val();
        var video_url2=$('.video_url2').val();
        var share_pic=$('.video_url3').val();
        var hengping_pic=$('.video_url4').val();
        var video_url=$('.video_url').val();
        var duration=$('.duration').val();
        $.ajax({
            type: "post",
            data: {fenlei:fenlei,huati:huati,users:users,material:material,video_desc:video_desc,video_url2:video_url2,video_url:video_url,duration:duration,share_pic:share_pic,hengping_pic:hengping_pic},
            dataType: "json",
            url: "<?=base_url("material/quailty_material/save_join_dub")?>",
            success: function (res) {
                if(res.code==0){
                    layer.msg(res.msg, {time:1000},function(){
                        window.location.href="<?=base_url("material/quailty_material/index")?>"
                    });
                }else{
                    layer.msg(res.msg, {time: 2000});
                }
            }
        })
    })

    //添加到精选
    $('.join').click(function(){
        var fenlei=$('.fenlei').val();
        var huati=$('.huati').val();
        var users=$('.users').val();
        var material=$('.material').val();//原始视频uuid
        var video_desc=$('.video_desc').val();
        var video_url2=$('.video_url2').val();
        var share_pic=$('.video_url3').val();
        var hengping_pic=$('.video_url4').val();
        var video_url=$('.video_url').val();
        var duration=$('.duration').val();
        $.ajax({
            type: "post",
            data: {fenlei:fenlei,huati:huati,users:users,material:material,video_desc:video_desc,video_url2:video_url2,video_url:video_url,duration:duration,share_pic:share_pic,hengping_pic:hengping_pic},
            dataType: "json",
            url: "<?=base_url("material/quailty_material/save_join_quality_dub")?>",
            success: function (res) {
                if(res.code==0){
                    layer.msg(res.msg, {time:1000},function(){
                        window.location.href=res.data
                    });
                }else{
                    layer.msg(res.msg, {time: 2000});
                }
            }
        })
    })

    $(function(){
        //上传
        layui.use('upload', function(){
            var upload = layui.upload;
            //上传视频
            upload.render({
                elem: '#test1' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "video"}
                ,size:"51200"
                ,accept: 'video'
                ,acceptMime: 'video/mp4,video/mov,video/avi'
                ,before:function(){
                    $(".up1").text("上传中。。。请等待");
                    $(".up1").show()
                }
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        layer.msg(res.msg,{time:1000},function(){
                            $(".up1").text("上传成功");
                            $('.sp').attr("src",res.data.file_url)
                            $('.video_url').val(res.data.file_url)
                        })
                    }else{
                        layer.msg(res.msg,{time:2000})
                    }
                }
            });

            //上传横屏封面
            upload.render({
                elem: '#test4' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                ,before:function(){
                    $(".up4").text("上传中。。。请等待");
                    $(".up4").show()
                }
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        layer.msg(res.msg,{time:1000},function(){
                            $(".up4").text("上传成功");
                            $('.pic4').attr("src",res.data.file_url)
                            $('.video_url4').val(res.data.file_url)

                        })
                    }else{
                        layer.msg(res.msg,{time:2000})
                    }
                }
            });

            //上传竖屏封面
            upload.render({
                elem: '#test2' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                ,before:function(){
                    $(".up2").text("上传中。。。请等待");
                    $(".up2").show()
                }
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        layer.msg(res.msg,{time:1000},function(){
                            $(".up2").text("上传成功");
                            $('.pic').attr("src",res.data.file_url)
                            $('.video_url2').val(res.data.file_url)

                        })
                    }else{
                        layer.msg(res.msg,{time:2000})
                    }
                }
            });

            //上传分享封面
            upload.render({
                elem: '#test3' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                ,before:function(){
                    $(".up3").text("上传中。。。请等待");
                    $(".up3").show()
                }
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        layer.msg(res.msg,{time:1000},function(){
                            $(".up3").text("上传成功");
                            $('.pic3').attr("src",res.data.file_url)
                            $('.video_url3').val(res.data.file_url)

                        })
                    }else{
                        layer.msg(res.msg,{time:2000})
                    }
                }
            });
        });
        //监听下拉框
        layui.use('form', function(){
            var form = layui.form;
            //监听分类下拉框选择
            form.on('select(fenlei)', function(data){
                //改变分类先清空下拉框值和页面值
                $('.huati').html("")//话题下拉框
                $('.material').html("")//关联素材
                $(".old_video_url").val("")
                $(".video_url2").val("")
                $(".video_url3").val("")
                $(".video_url4").val("")
                $(".pic").attr("src","")
                $(".pic3").attr("src","")
                $(".pic4").attr("src","")
                $(".sp").attr("src","")
                $(".video_desc").val("")
                $(".video_url").val("")
                $(".duration").val("")
                //获得监听的值
                var type_id=data.value;
                //给下拉框赋值
                $('.fenlei_value').val(type_id);
                //获得下拉框的值
                var type_ids=$('.fenlei_value').val();
                $.ajax({
                    type: "post",
                    data: {type_id:type_ids},
                    dataType: "json",
                    url: "<?=base_url("material/material/type_sub")?>",
                    success: function (res) {
                        if(res.code==0){
                            $('.huati').html("")
                            var arrs = res.data;
                            $.each(arrs, function (i, n) {
                                $('.huati').append("<option value='" + n.id + "'>" + n.sub_title + "</option>");
                            });
                            layui.form.render('select');
                        }else{
                            layer.msg(res.msg, {time: 2000},function(){
                                $('.huati').append("<option value=''></option>");
                            });
                            layui.form.render('select');
                        }
                    }
                })
            });
            //监听话题下拉框选择
            form.on('select(huati)', function(data){
                //改变分类先清空下拉框值和页面值
                $('.material').html("")//关联素材
                $(".old_video_url").val("")
                $(".video_url2").val("")
                $(".video_url3").val("")
                $(".video_url4").val("")
                $(".pic").attr("src","")
                $(".pic3").attr("src","")
                $(".pic4").attr("src","")
                $(".sp").attr("src","")
                $(".video_desc").val("")
                $(".video_url").val("")
                $(".duration").val("")
                //获得监听的值
                var type_id=data.value;
                //给下拉框赋值
                $('.huati_value').val(type_id);
                //获得下拉框的值
                var type_ids=$('.huati_value').val();
                $.ajax({
                    type: "post",
                    data: {type_id:type_ids},
                    dataType: "json",
                    url: "<?=base_url("material/quailty_material/material")?>",
                    success: function (res) {
                        if(res.code==0){
                            $('.material').html("")
                            var arrs = res.data;
                            $.each(arrs, function (i, n) {
                                $('.material').append("<option value='" + n.video_uuid + "'>" + n.video_desc + "</option>");
                            });
                            layui.form.render('select');
                        }else{
                            layer.msg(res.msg, {time: 2000},function(){
                                $('.material').append("<option value=''></option>");
                            });
                            layui.form.render('select');
                        }
                    }
                })
            });
            //监听关联素材下拉框选择
            form.on('select(material)', function(data){
                console.log(data.value)
                //获得监听的值
                var type_id=data.value;
                //给下拉框赋值
                $('.material_value').val(type_id);
                //获得下拉框的值
                var type_ids=$('.material_value').val();
                $.ajax({
                    type: "post",
                    data: {type_id:type_ids},
                    dataType: "json",
                    url: "<?=base_url("material/quailty_material/material_detail")?>",
                    success: function (res) {
                        if(res.code==0){
                            var arrs = res.data;
                            $.each(arrs, function (i, n) {
                                $(".old_video_url").val(n.transcode_video_url)
                                $(".video_url2").val(n.video_small_pic)
                                $(".video_url3").val(n.video_share_pic)
                                $(".video_url4").val(n.video_big_pic)
                                $(".pic").attr("src",n.video_small_pic)
                                $(".pic3").attr("src",n.video_share_pic)
                                $(".pic4").attr("src",n.video_big_pic)
                                $(".sp").attr("src",n.video_url)
                                $(".video_desc").val(n.video_desc)
                                $(".video_url").val(n.transcode_video_url)
                                $(".duration").val(n.video_time)
                            });
                            layui.form.render('select');
                        }else{
                            layer.msg(res.msg,{time:2000})
                        }
                    }
                })
            });
        });
    })

    //返回
    $('.back').click(function(){
        window.history.back(-1);
    })

    //获取分类
    $.ajax({
        type: "get",
        data: {},
        dataType: "json",
        url: "<?=base_url("material/quailty_material/types")?>",
        success: function (res) {
            if(res.code==0){
//                var arr = JSON.parse(res.data);
                var arr = res.data;
                $.each(arr, function (i, n) {
                    $('.fenlei').append("<option value='" + n.id + "'>" + n.name + "</option>");
                });
                layui.form.render('select');
            }else{
                layer.msg(res.msg, {time: 2000});
            }
        }
    })
    //
    $(".layui-input-inline.huati2").click(function(){
        var type_value=$(".fenlei_value").val();
        if(type_value.length==0){
            layer.msg("请先选择分类",{time:2000})
        }
    })
    $(".layui-input-inline.users_material").click(function(){
        var type_value=$(".huati_value").val();
        if(type_value.length==0){
            layer.msg("请先选择话题",{time:2000})
        }
    })
</script>
